<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <link rel="icon" href="./favicon.ico" />
    <title>Document</title>
    <style>
      .max {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .card {
        border: 1px solid #e1e1e1;
        border-radius: 4px;
        margin-bottom: 16px;
      }
      .user_title {
        text-align: center;
      }
      .attr_item_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 4px;
      }
      .attr_item_box .value {
        width: 50px;
      }
      .about {
        font-size: 12px;
        color: #999;
      }
      .btn {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 999;
        opacity: 0.7;
      }
      .btn button {
        cursor: pointer;
        margin-left: 16px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="btn">
        <div>
          <button @click="importBtn">导入</button>
          <button @click="exportBtn">导出</button>
          <button @click="reset">重置</button>
          <button @click="updateHandle">保存</button>
        </div>
      </div>
      <div class="max">
        <div v-for="(item, index) in list" :key="index" class="card">
          <p class="user_title">
            [ {{ index + 1 }} ] {{ item.name }} <span class="about">{{ item.nameEn }}</span>
          </p>
          <div v-for="e, in item.content" :key="e.key" class="attr_item_box">
            <div>{{ e.title }}<span class="about">{{ e.key }}</span></div>
            <input class="value" type="number" v-model="e.value" />
          </div>
        </div>
      </div>
    </div>
    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            list: []
          }
        },
        created() {
          this.getList()
        },
        methods: {
          async getList() {
            const res = await fetch('/getInitData')
            this.list = await res.json()
            console.log(this.list, '-->>> 678');
          },
          async updateHandle() {
            const res = await fetch('/update', {
              method: 'post',
              body: JSON.stringify(this.list),
              headers: { 'Content-Type': 'application/json' }
            })
            console.log(res, '-->>> 更新成功')
          },
          async reset() {
            const res = await fetch('/reset')
            console.log(res, '-->>> 重置成功')
            this.getList()
          },
          importBtn() {
            const input = document.createElement('input')
            input.type = 'file'
            input.click()
            input.onchange = (f) => {
              const reader = new FileReader()
              reader.readAsText(f.target.files[0])
              reader.onload = (e) => {
                const text = e.target.result
                try {
                  this.list = JSON.parse(text)
                } catch (error) {
                  console.error(error)
                  console.log('导入失败！存档损坏')
                }
              }
            }
          },
          exportBtn() {
            console.log(this.list, '-->>> list')
            const fileName = `set-config_${Date.now()}.txt`
            const file = new File([JSON.stringify(this.list)], fileName, { type: 'text/plain;charset=utf-8' })
            const a = document.createElement('a')
            a.href = URL.createObjectURL(file)
            a.download = fileName
            a.click()
          }
        }
      })
    </script>
  </body>
</html>
